<template>
  <div class="bigbox">
    <div class="leftbox">
      <div>
        <el-select
          v-model="model"
          placeholder="请选择"
          size="small"
          style="width: 100%"
          @change="changetype"
          clearable
        >
          <el-option
            class="option"
            v-for="(item, index) in options"
            :key="index"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </div>
      <div style="margin-top: 10px">
        <template>
          <el-autocomplete
            class="inline-input"
            v-model="filterText"
            size="small"
            style="margin-bottom: 10px; width: 100%"
            :fetch-suggestions="querySearch"
            placeholder="输入关键字进行过滤"
            :trigger-on-focus="true"
            value-key="name"
            :debounce="300"
            @select="handleSelect"
          ></el-autocomplete>
        </template>
      </div>
      <div class="treebox">
        <!-- 树状图区域结构 -->
        <el-tree
          :props="props"
          :load="loadNode"
          node-key="id"
          accordion
          :highlight-current="true"
          :default-expanded-keys="array"
          lazy
          @node-click="handleNodeClick"
          ref="tree"
        >
          <template slot-scope="{ node, data }">
            <span
              :style="{
                cursor:
                  data.className == 'AirconditionMain' ||
                  data.className == 'CoolingTower' ||
                  data.className == 'Boiler' ||
                  data.className == 'FreezePump' ||
                  data.className == 'CoolingPump' ||
                  data.className == 'DraughtFanCoiler' ||
                  data.className == 'NewDraughtFan' ||
                  data.className == 'Lighting' ||
                  data.className == 'Socket' ||
                  data.className == 'Elevator' ||
                  data.className == 'Pump' ||
                  data.className == 'ExhaustFan' ||
                  data.className == 'ElectricCalorifier' ||
                  data.className == 'SpeElectricDevice' ||
                  data.className == 'ProElectricDevice' ||
                  data.className == 'LightingSocket' ||
                  data.className == 'RollingMillDevice' ||
                  data.className == 'Pipeline' ||
                  data.className == 'Heatingpump' ||
                  data.className == 'Watersuppump' ||
                  data.className == 'EcmEquip'
                    ? 'no-drop'
                    : 'pointer',
                fontSize: '14px',
                color: '#606266',
              }"
            >
              <img
                :src="'data:image/png;base64,' + data.iconBase64"
                style="
                  width: 16px;
                  height: 16px;
                  margin-right: 5px;
                  vertical-align: bottom;
                "
              />
              {{ node.label }}</span
            >
          </template>
        </el-tree>
      </div>
    </div>
    <div class="rightbox">
      <div>
        <el-button class="button" type="primary" @click="submit"
          >保存</el-button
        >
        <el-radio-group v-model="radio1" size="small" @change="changeradio">
            <el-radio-button label="全选"></el-radio-button>
            <el-radio-button label="全不选"></el-radio-button>
          </el-radio-group>
      </div>
      <el-divider></el-divider>
      <div class="chackbox">
        <div>关联计算信息</div>
        <div>
          <!-- <el-radio-group v-model="radio1" size="small" @change="changeradio">
            <el-radio-button label="全选"></el-radio-button>
            <el-radio-button label="全不选"></el-radio-button>
          </el-radio-group> -->
        </div>
        <div></div>
      </div>
      <div class="checkbox">
        <el-empty :image-size="400" v-if="!checketlist[0]"></el-empty>
        <el-checkbox-group v-model="checkedCities" v-else>
          <el-checkbox
            v-for="item in checketlist"
            :label="item.classId"
            :key="item.classId"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
import { getzidianxialaapi } from '@/api/guidelines'
import { getKeywordListApi } from '@/api/Ledger3'
import {
  getgenjiedianapi,
  getzijidianapi,
  gettreedevicelistapi,
  postbangdingapi,
  getnengyuantypeapi
} from '@/api/energy-consumption/Basic-information/gateway'
export default {
  name: 'CallPoliceIndex',

  data () {
    return {
      array: [],
      filterText: '',
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      model: '',
      options: [],
      radio1: '',
      checketlist: [],
      checkedCities: [],
      treevalue: {}
    }
  },

  async mounted () {
    // 获取能源介质
    const jiezhi = await getnengyuantypeapi()
    this.options = jiezhi.data.list
    this.model = jiezhi.data.list[0].code
  },
  methods: {
    // 保存
    async submit () {
      this.checketlist.forEach((ele) => {
        if (this.checkedCities.includes(ele.classId)) {
          ele.bindFlag = '1'
        } else {
          ele.bindFlag = '0'
        }
      })
      const arr = this.checketlist.map((ele) => {
        return {
          bindFlag: ele.bindFlag,
          classId: ele.classId,
          className: ele.className,
          id: ele.id,
          parentClassName: this.treevalue.className,
          parentClassId: this.treevalue.id,
          energyType: this.model
        }
      })
      await postbangdingapi(arr).then((res) => {
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 树节点选择
    handleNodeClick (val) {
      if (
        val.className == 'AirconditionMain' ||
        val.className == 'CoolingTower' ||
        val.className == 'Boiler' ||
        val.className == 'FreezePump' ||
        val.className == 'CoolingPump' ||
        val.className == 'DraughtFanCoiler' ||
        val.className == 'NewDraughtFan' ||
        val.className == 'Lighting' ||
        val.className == 'Socket' ||
        val.className == 'Elevator' ||
        val.className == 'Pump' ||
        val.className == 'ExhaustFan' ||
        val.className == 'ElectricCalorifier' ||
        val.className == 'SpeElectricDevice' ||
        val.className == 'ProElectricDevice' ||
        val.className == 'LightingSocket' ||
        val.className == 'RollingMillDevice' ||
        val.className == 'Pipeline' ||
        val.className == 'Heatingpump' ||
        val.className == 'Watersuppump' ||
        val.className == 'EcmEquip'
      ) {
        this.checketlist = []
        this.checkedCities = []
        this.treevalue = {}
        this.radio1 = ''
      } else {
        this.getchecklist(val.className, this.model, val.id)
        this.treevalue = val
      }
    },
    // 单选框点击事件
    changeradio (val) {
      if (val == '全选') {
        this.checkedCities = this.checketlist.map((ele) => ele.classId)
      } else if (val == '全不选') {
        this.checkedCities = []
      }
    },
    // 下拉框选中事件
    changetype (val) {
      if (!this.treevalue.id) return this.$message.warning('请先选择树列表')
      this.getchecklist(
        this.treevalue.className,
        this.model,
        this.treevalue.id
      )
    },
    // 获取多选框数据
    async getchecklist (className, energyType, treeId) {
      const {
        data: { list }
      } = await gettreedevicelistapi({ className, energyType, treeId })
      this.checketlist = list
      const array = list.map((ele) => {
        if (ele.bindFlag == '1') {
          return ele.classId
        }
      })
      this.checkedCities = array.filter((ele) => {
        if (ele) {
          return ele
        }
      })
      if (this.checkedCities.length && this.checkedCities.length == list.length) { this.radio1 = '全选' }
    },
    // 树节点搜索
    async querySearch (queryString, cb) {
      setTimeout(async () => {
        const res = await getKeywordListApi({ name: queryString })
        const restaurants = res.data.list
        cb(restaurants)
      }, 500)
      // 调用 callback 返回建议列表的数据
    },
    // 搜索选择
    handleSelect (item) {
      const newarr = item.pathId.split(',')
      for (let i = 0; i < newarr.length; i++) {
        if (newarr[i]) {
          this.array.push(newarr[i])
        }
      }
      function getgaoliang (that) {
        const node = that.$refs.tree.getNode(item)
        if (node) {
          that.$refs.tree.setCurrentKey(String(item.id))
        } else {
          setTimeout(() => {
            getgaoliang(that)
          }, 500)
        }
      }
      getgaoliang(this)
    },
    // 树结构懒加载
    async loadNode (node, resolve) {
      const res = await getgenjiedianapi({ treeModel: 'ENERGY_SET_TREE' })
      const ress = await getzijidianapi(res.data.list[0])
      if (node.level === 0) {
        return resolve(ress.data.list)
      } else if (node.level === 1) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 2) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 3) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 4) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 5) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      }
    }
  },
  watch: {
    filterText (newValue) {
      this.filterText = newValue
        .replace(/^\[(.*?)\]/, '')
        .replace(/\((.*?)\)$/, '')
    },
    'checkedCities.length' (val) {
      if (this.checketlist.length && this.checketlist.length == val) {
        this.radio1 = '全选'
      } else {
        this.radio1 = ''
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.option {
  padding-left: 10px;
}
.bigbox {
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox {
    width: 300px;
    height: 100%;
    background-color: #fff;
    padding: 20px;
    margin-right: 10px;
    .treebox {
      height: 80%;
      overflow-y: auto;
    }
  }
  .rightbox {
    flex: 1;
    background-color: #fff;
    height: 100%;
    padding: 20px;
    .button {
      width: 60px;
      height: 30px;
      margin-right: 20px;
    }
    .chackbox {
      display: flex;
      justify-content: space-between;
    }
    .checkbox{
      height: 90%;
      overflow-y: auto;
    }
  }
}
::v-deep .el-divider--horizontal {
  margin: 20px 0;
}
::v-deep .el-checkbox-group {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}
::v-deep .el-checkbox {
  width: 33.33%;
  margin: 20px 0;
}
</style>
